<template>
  <div class="service">
    <div class="title">触发器配置
      <span class="add-btn blue-btn" @click.stop="addTrigger">添加触发器</span>
    </div>
    <msgItem :item="item" :value="item.status" v-for="item in list" :key="item.key" @changeStatus="changeStatus">
      <template>
        <div class="sub-title">{{item.name}}</div>
        <div class="mgs-tip1">{{item.remark}}</div>
      </template>
      <template #btn>
        <span class="edit-btn blue-btn" @click.stop="handleEdit(item)">编辑</span>
        <span class="del-btn" @click.stop="handleDel(item)">删除</span>
      </template>
    </msgItem>
    <drawer
        class="outIntoHouse"
        irection="rtl"
        size="600px"
        :title="drawerData.title"
        :drawer="drawerData.isShow"
        @save="saveConfirm"
        @cancelFun="cancelFun('addOrEdit')"
        @closeDraw="cancelFun('addOrEdit')"
      >
        <template slot="column">
          <addOrEditTrigger ref="addOrEditTrigger" :smsTemplList="smsTemplList" :smsSignList="smsSignList" :id="id" @success="success"></addOrEditTrigger>
        </template>
      </drawer>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { commonAction } from '@/utils/common';
import msgItem from './msgItem.vue'
import drawer from '@/common/views/drawer/index.vue'
import addOrEditTrigger from './addOrEditTrigger.vue'
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore';
@Component({
  name: 'trigger',
  components: {
    addOrEditTrigger,
    msgItem,
    drawer
  }
})
export default class extends Vue {
  @Prop({ default: () => [] }) private smsSignList
  @Prop({ default: () => [] }) private smsTemplList
  [x: string]: any;
  private id = ''

  private list = []

  private drawerData = {
    isShow: false,
    type: '',
    title: ''
  }

  private addTrigger () {
    this.drawerData.isShow = true
    this.drawerData.title = '添加触发器'
    this.$nextTick(() => {
      (this.$refs as any).addOrEditTrigger.init({})
    })
  }

  private success () {
    this.id = ''
    this.drawerData.isShow = false
    this.fetchData()
  }

  private handleDel (item: any) {
    this.$confirm('确定要删除该条触发器吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      commonAction({ url: '/server-work/action/trigger/order/config/delete/' + item.id, method: 'get' }).then(res => {
        if (res.success) {
          this.$message.success('删除成功！')
          this.fetchData()
        }
      })
    })
  }

  private handleEdit (item: any) {
    commonAction({ url: '/server-work/action/trigger/order/config/search', method: 'post', data: { id: item.id } }).then(res => {
      if (res.success) {
        this.drawerData.isShow = true
        this.drawerData.title = '修改触发器'
        this.$nextTick(() => {
          (this.$refs as any).addOrEditTrigger.init(res.data)
        })
      }
    })
  }

  private changeStatus (item: any) {
    item.status = item.status === 0 ? 1 : 0
    const params = {
      modelId: this.$route.params.businessId,
      id: item.id,
      status: item.status
    }
    commonAction({ url: '/server-work/action/trigger/order/config/switch', method: 'post', data: params }).then(res => {
      if (res.success) {
        this.$message.success('修改成功！')
      }
    })
  }

  private saveConfirm () {
    (this.$refs as any).addOrEditTrigger.saveConfirm()
  }

  private cancelFun () { // 关闭抽屉
    this.drawerData.isShow = false
  }

  private async getSheetConfig () {
    const data = { modelId: this.$route.params.businessId, queryFieldType: 1 }
    commonAction({ url: '/server-work/action/workOrderModel/getConfig', method: 'post', data }).then(res => {
      if (res.success) {
        busConfigStore.list = res.data.fields || [];
      }
    })
  }

  private fetchData () {
    commonAction({ url: '/server-work/action/trigger/order/config/list', method: 'post', data: { modelId: this.$route.params.businessId } }).then(res => {
      if (res.success) {
        this.list = res.data || []
      }
    })
  }

  private beforeMount () {
    this.getSheetConfig()
    this.fetchData()
  }
}
</script>
<style lang="stylus" scoped>
.service
  .blue-btn
    font-size: 12px;
    font-weight: 400;
    color: #008BEE;
    cursor: pointer;
  .edit-btn
    margin-right: 16px
    cursor pointer
  .del-btn {
    color: #FC6B5C;
    margin-right: 16px
    cursor: pointer;
  }
  .add-btn {
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .title {
    margin-bottom: 24px
    font-weight: 600;
    color: #303753;
    font-size: 14px
    position: relative
  }
  .sub-title {
    font-weight: 400;
    color: #303753;
    margin-bottom: 10px
  }
  .mgs-tip1
    font-weight: 400;
    color: #767E91;
    line-height: 16px
</style>
